<template>
  <el-form
    ref="loginForm"
    status-icon
    label-width="120px"
    class="demo-loginFormData"
    :rules="commonRules"
    :model="loginFormData"
  >
    <el-form-item label="用户名" prop="username" class="username-form-item">
      <el-input
        v-model="loginFormData.username"
        type="input"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="密码" prop="password" class="password-form-item">
      <el-input
        v-model="loginFormData.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="验证码" prop="captcha" class="captrue-form-item">
      <el-input
        v-model="loginFormData.captcha"
        maxlength="5"
        @keydown.enter="submitForm(loginForm)"
      />
      <span
        class="captcha-svg"
        v-html="captcha"
        @click="getCaptcha"
        v-loading="loading"
      ></span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(loginForm)" class="btn">
        登入
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import * as api from "@/api/users.js";
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { commonRules, useSubmitForm } from "../../composition/login/validate";

//引入路由对象
import { useRouter } from "vue-router";

//引入loading加载框
import { ElLoading } from "element-plus";

//引入store
import { useUser } from "@/store/users";

let router = useRouter();

let userStore = useUser();

let validateSuccess = () => {
  verifyCaptcha(loginFormData.captcha.toLowerCase());
  // console.log("校验成功");
};
let validateFailed = () => {
  console.log("校验失败");
};
let submitForm = useSubmitForm(validateSuccess, validateFailed);
const loginForm = ref();

const loginFormData = reactive({
  username: "",
  password: "",
  captcha: "",
});

let loading = ref(true);

//声明一个响应式变量
let captcha = ref();

//获取验证码
let getCaptcha = async () => {
  let res = await api.getCaptchaApi();
  loading.value = false;
  if (res.data.state) captcha.value = res.data.img;
};

let loadingInstance = null;
//校验验证码
let verifyCaptcha = async (captcha) => {
  loadingInstance = ElLoading.service({
    // lock: true,
    text: "正在登入...",
    background: "rgba(0,0,0,.3)",
  });
  try {
    let res = await api.verifyCaptchaApi(captcha);
    login(loginFormData.username, loginFormData.password);
  } catch (e) {
    getCaptcha();
    loadingInstance.close();
  }
};

//用户名密码登入
/**
 *
 * @param {String} username 用户名
 * @param {String} password 密码
 */
let login = async (username, password) => {
  try {
    let res = await api.loginApi(username, password);
    // console.log("password", loginFormData);
    //存储token
    sessionStorage.setItem("myx-token", res.data.token);
    //存储用户信息
    userStore.$patch({ userInfo: res.data.userInfo });
    router.push("/"); //跳转到主页
  } catch (e) {
    loadingInstance.close();
    console.log(e);
  }
};

onUnmounted(() => {
  console.log("组件被卸载了");
  loadingInstance && loadingInstance.close();
});

//首次页面加载调用
onMounted(() => {
  getCaptcha();
});
</script>

<style lang="scss" scoped>
.username-form-item,
.password-form-item {
  .el-input {
    width: 200px !important;
    margin-right: 50px;
  }
}
.captrue-form-item {
  .el-input {
    width: 100px !important;
    margin-right: 150px;
  }
}
.btn {
  background: linear-gradient(90deg, #1596fb, #002dff);
  border-radius: 6px;
  width: 200px;
}
.captcha-svg {
  position: fixed;
  background-color: rgba(0, 0, 0, 0);
  width: 100px;
  height: 32px;
  border: 1 solid #606266;
  border-radius: 0 4px 4px 0;
  margin-left: 100px;

  cursor: pointer;
  :deep(svg) {
    width: 100px;
    height: 32px;
  }
}
.captrue-form-item {
  :deep(.el-input__wrapper) {
    border-radius: 4px 0 0 4px;
    border-right: 0;
    box-shadow: 0 0 0 0;
  }
}
</style>
